<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 300px;
            background-color: yellow;
            /*显示的列数*/
            column-count: 5;
            /*调整间距*/
            column-gap: 30px;
            /* 边框*/
            column-rule: 2px solid red;
            /* 列高度统一*/
            column-fill:balance; /*均衡（默认）  如果是auto就是把父盒子占满*/
            /*调整列宽*/
            /* column-width: 500 px; */
        }
        div>h1{
            text-align: center;
            /*给里面小盒子  只有all 0 */
            column-span: all;
            /*横跨所有列*/
        }
    </style>
</head>

<body>
    <div>
        <h1>yyy</h1>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo autem deleniti aliquam dicta ratione rem eum
        facilis ipsum illo, exercitationem animi a blanditiis, laudantium eius quibusdam reiciendis iste delectus in.
        Animi officia odit magnam rem, perspiciatis quos quas ipsum reprehenderit totam delectus dolores voluptatibus
        nam ea error quisquam? Vitae in nostrum impedit! Sint, optio non et neque incidunt enim tempora.
        Voluptatibus consectetur recusandae quas mollitia error pariatur eos. Sunt sit non reiciendis perspiciatis fugit
        impedit nesciunt repellendus inventore, ipsum, doloribus atque itaque eligendi modi quidem velit totam! Magni,
        voluptatum eum.
        Quaerat sint explicabo numquam reiciendis dolor repellendus ad assumenda nisi dolore animi illum adipisci sequi
        pariatur earum, aliquam nemo hic natus expedita perferendis repellat doloremque! Amet vitae reiciendis
        praesentium ipsam.
        Repellendus nostrum aliquid voluptates architecto, cum saepe aliquam necessitatibus id velit beatae,
        dignissimos, totam tempora vero repudiandae neque ipsam consectetur? Ad, aperiam eum. Quis cupiditate quos ad
        sit dolorum ipsam!
        Aliquam tenetur perspiciatis at exercitationem adipisci. Dolore facilis deleniti id cupiditate consequuntur
        alias, molestiae quaerat eos esse omnis quidem temporibus sit quibusdam nobis quas velit amet praesentium odit,
        blanditiis itaque?
    </div>
</body>

</html>